import React,{ useState } from 'react'
import hu from '../../image/images/hu.png'
import { InfoCircleOutlined } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import { Button, Form, Input, Radio,Checkbox , Alert, Space} from 'antd';
type Props = {}

const Login = (props: Props) => {
    const navigate=useNavigate()
    type RequiredMark = boolean | 'optional';
    const [form] = Form.useForm();
    const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
    const onFinish = (values: any) => {
        console.log('Success:', values);
        if(values.username==='123'&&values.password==='123'){
            navigate('/home/Articles')
            localStorage.setItem('token', values)
        }else{
         
        }
      };
    
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
    const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {
      setRequiredMarkType(requiredMarkValue);
    };
    const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        console.log(e, 'I was closed.');
      };
  return (
    <div>
        <div style={{width:"100%",borderBottom:'solid 1px',textAlign:'center' ,height:"50px",lineHeight:"50px"}}>
           <img src={hu} alt="" />
        </div >
        <Space direction="vertical" style={{ width: '100%' }}>
    <Alert
    style={{width:"800px",margin:"0 auto"}}
      message="Invalid login or password."
      type="error"
      closable
      onClose={onClose}
    />

  </Space>
        <h1 style={{width:"800px",margin:"0 auto",height:"78px",lineHeight:'78px',marginTop:"50px"}}>GitLab</h1>
        <div style={{width:"800px",margin:"0 auto",display:'flex'}}>
            <div style={{width:"500px",lineHeight:"40px"}}>
         
               <p><b style={{fontSize:"20px"}}>A complete DevOps platform</b></p>
               <p>GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security.</p>
               <p>This is a self-managed instance of GitLab.</p>
            </div>
            <div style={{width:"300px"}}>
            <Form
        style={{border:"solid 1px",padding:'10px'}}
      form={form}
      layout="vertical"
      initialValues={{ requiredMarkValue: requiredMark }}
      onValuesChange={onRequiredTypeChange}
      requiredMark={requiredMark}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
   
      <Form.Item label="Username or email"    name="username" required >
        <Input  />
      </Form.Item>
      <Form.Item label="Password"    name="password" required>
        <Input />
      </Form.Item>
      <Form.Item name="remember" valuePropName="checked"  wrapperCol={{ offset: 8, span: 16 }}>
        <Checkbox style={{marginLeft:"-80px"}}>Remember me</Checkbox>
        <a>Forgot your password?</a>
      </Form.Item>
      <Form.Item>
        <Button  type="primary" htmlType="submit" style={{width:'80%',textAlign:'center'}}>sign in</Button>
      
      </Form.Item>
    </Form>
    <p><span>Don't have an account yet?</span><a href="#">Register now</a></p>
            </div>
        </div>
    </div>
  )
}

export default Login